<template>
  <div class="container">
    <div class="app-container">
      <el-button class=" btn-add" size="mini" type="primary" @click="showDialog=true">添加权限</el-button>
      <el-table :data="permissionList" row-key="id"
      :default-expand-all="true"
      >
        <el-table-column label="名称" prop="name">

        </el-table-column>
        <el-table-column label="标识" prop="code">

        </el-table-column>
        <el-table-column label="描述" prop="description">

        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
          <el-button v-if="row.type===1" size="mini" type="text" @click="openDialog(row.id)">添加</el-button>
          <el-button size="mini" type="text" @click="btnEdit(row.id)" >编辑</el-button>
          <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
                title="是否删除吗？" @onConfirm="confirmDel(row.id)" > 
                <!-- 需要onConfirm才能触发 -->
                <el-button type="text" size="mini" slot="reference" style="padding: 10px;">删除</el-button>
              </el-popconfirm>


          </template>

        </el-table-column>

      </el-table>     
    </div>                                                                   
    <add-permission
      ref="addPermission" :isEdit.sync="isEdit"
     :showDialog.sync="showDialog" :getPid="getPid" @update-perssion="getPermissionList"></add-permission>
  </div>
</template>
<script>
import { delPermission, getPermissionList } from '@/api/permission'
import { transListToTreeData } from '@/utils'
import addPermission from './components/add-permission.vue'
export default {
  name: 'Permission',
  components: {
    addPermission
},
  data(){
    return {
      permissionList:[],
      showDialog:false,
      getPid:0,
      isEdit:false
    }
  },
  created(){
    this.getPermissionList()
  },
  methods: {
    async getPermissionList(){
     this.permissionList = transListToTreeData(await getPermissionList(),0)
      
    },
    openDialog(id){
      this.getPid = id
      this.showDialog = true
    },
    async confirmDel(id){
      await delPermission(id)
      this.$message.success('删除成功')
      this.getPermissionList()
    },
    btnEdit(id){
      this.showDialog=true
      this.isEdit=true
      this.$nextTick(()=>{
        this.$refs.addPermission.getPermissionDetail(id)
      })
    }
    
  }
}
</script>

<style scoped>
.btn-add {
  margin: 10px;
}
</style>
